<template>
	<div class="Serve">

		<header class="head">
	<div class="middleHead">
		<i class="iconfont icon-chakantiezigengduo"></i>
		<img src="/static/img/yanxuan/head.png" class="headWord">
		<div class="shoppingIcon">
			<i class="iconfont icon-gouwuche"></i>
			<i class="iconfont icon-icon"></i>
		</div>
	</div>
	<div class="nav">
		<div class="middleNav">
			<ul class="navUl">
				<li class="navLi01 " @click="Stroy">故事<div class="border"></div></li>
				<li class="navLi01 " @click="goproduct">好货<div class="border"></div></li>
				<li class="navLi01 navLi02">服务<div class="border"></div></li>
			</ul>
		</div>
		<img src="/static/img/yanxuan/navLine.png" class="navLine"/>
	</div>
</header>

<div class="content">
<!--轮播图-->
 <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="/static/img/yanxuan/servelunbo1.jpg" alt="" class="lunboPic"/></div>
            <div class="swiper-slide"><img src="/static/img/yanxuan/servelunbo2.jpg" alt="" class="lunboPic"></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
</div>
<!--严选医生服务-->
<div class="serveHealth">
	<div class="healthCont">
		<div class="reTitle">
			<p class="titleP">严选医生服务</p>
			<a href="#"><i class="iconfont icon-msnui-right-arrow-round"></i></a>
		</div>
		<div class="goods">
			<ul class="goodsUl">
				<li class="goodsLi">
					<a href="#" class="module">
						<div class="imgCont">
							<img src="/static/img/yanxuan/head01.jpg" class="goodsPic"/>
						</div>
						<div class="goodsDetail">
							<h2 class="gift">生长发育/门诊指导</h2>
							<p class="giftWord">广西壮族自治区人民医院-小儿科-戴艺-副主任医师，撞长小儿内分泌的诊治如生长迟缓、…</p>
						</div>
						<div class="goodsPirce">
							<span class="cheap">￥25.00</span>
						</div>
					</a>
				</li>
				<li class="goodsLi">
					<a href="#" class="module">
						<div class="imgCont">
							<img src="/static/img/yanxuan/head02.jpg" class="goodsPic"/>
						</div>
						<div class="goodsDetail">
							<h2 class="gift">生长发育/门诊指导</h2>
							<p class="giftWord">广西壮族自治区人民医院-小儿科-戴艺-副主任医师，撞长小儿内分泌的诊治如生长迟缓、…</p>
						</div>
						<div class="goodsPirce">
							<span class="cheap">￥25.00</span>
						</div>
					</a>
				</li>
				<li class="goodsLi">
					<a href="#" class="module">
						<div class="imgCont">
							<img src="/static/img/yanxuan/head03.jpg" class="goodsPic"/>
						</div>
						<div class="goodsDetail">
							<h2 class="gift">生长发育/门诊指导</h2>
							<p class="giftWord">广西壮族自治区人民医院-小儿科-戴艺-副主任医师，撞长小儿内分泌的诊治如生长迟缓、…</p>
						</div>
						<div class="goodsPirce">
							<span class="cheap">￥25.00</span>
						</div>
					</a>
				</li>
			</ul>
		</div>
	</div>
</div>

<!--微医全科-->
<div class="bigPic">
	<a href="#" class="picCont">
		<img src="/static/img/yanxuan/middle.jpg" class="middlePic"/>
	</a>
</div>

<!--严选健康服务-->
<div class="serveHealth">
	<div class="healthCont">
		<div class="reTitle">
			<p class="titleP">严选医生服务</p>
			<a href="#"><i class="iconfont icon-msnui-right-arrow-round"></i></a>
		</div>
		<div class="goods">
			<ul class="goodsUl">
				<li class="goodsLi">
					<a href="#" class="module">
						<div class="imgCont">
							<img src="/static/img/yanxuan/health01.jpg" class="goodsPic"/>
						</div>
						<div class="goodsDetail">
							<h2 class="gift">关爱父母体检套餐A</h2>
							<p class="giftWord">除了陪伴，我们还可以给父母健康</p>
						</div>
						<div class="goodsPirce">
							<span class="cheap">￥25.00</span>
						</div>
					</a>
				</li>
				<li class="goodsLi">
					<a href="#" class="module">
						<div class="imgCont">
							<img src="/static/img/yanxuan/health02.jpg" class="goodsPic"/>
						</div>
						<div class="goodsDetail">
							<h2 class="gift">关爱父母体检套餐B</h2>
							<p class="giftWord">除了陪伴，我们还可以给父母健康</p>
						</div>
						<div class="goodsPirce">
							<span class="cheap">￥699.00</span>
						</div>
					</a>
				</li>
				<li class="goodsLi">
					<a href="#" class="module">
						<div class="imgCont">
							<img src="/static/img/yanxuan/health03.jpg" class="goodsPic"/>
						</div>
						<div class="goodsDetail">
							<h2 class="gift">关爱父母体检套餐C</h2>
							<p class="giftWord">除了陪伴，我们还可以给父母健康</p>
						</div>
						<div class="goodsPirce">
							<span class="cheap">￥1099.00</span>
						</div>
					</a>
				</li>
			</ul>
		</div>
	</div>
</div>
</div>
<foot></foot>
</div>
</template>

<script>
import Foot from "../components/commons/Foot"
    export default {
        data() {
            return {}
        },
        components:{
			Foot
		},
        methods:{
          gostroy:function () {
            this.$router.push("/Stroy")
          },
          goproduct:function () {
            this.$router.push("/YanXuanProduct")
          }
        },
        mounted:function(){
        	 window.onload = function() {
			      var mySwiper = new Swiper ('.swiper-container', {
			        // 轮播图的方向，也可以是vertical方向
			        direction:'horizontal',
			        //播放速度
			        loop: true,
			        // 自动播放时间
			        autoplay:true,
			        // 播放的速度
			        speed:2000,
			        // 如果需要分页器，即下面的小圆点
			        pagination: '.swiper-pagination',
			　　　　　　// 这样，即使我们滑动之后， 定时器也不会被清除
			　　　　  autoplayDisableOnInteraction : false,
			      });
			    }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import "../assets/css/serve.css";
@import "../assets/css/swiper-3.4.2.min.css";
</style>
